<template>
  <div id="box">
    <!-- hender 头部-->
    <div class="header">
      <div class="top">
        <div class="left">
          <van-icon name="location-o" />
          <div>
            <img src="../../../public/img/pic/logo/white@3x.png" alt="" />
          </div>
        </div>
        <div class="canter">
          <div><van-icon name="search" /></div>
          <input type="text" placeholder="请输入关键字" />
        </div>
        <div class="right">
          <van-icon name="shop-o" />
        </div>
      </div>
      <div class="classfy">
        <div class="classfyleft">
          <van-tabs
            line-width="20px"
            background="#00000000"
            title-inactive-color="#fff"
            title-active-color="#ff6040"
          >
            <van-tab
              v-for="item in catelist"
              :key="item.id"
              :title="item.catename"
            >
            </van-tab>
          </van-tabs>
        </div>
        <div class="classfyright">
          <p><van-icon name="ellipsis" />分类</p>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="image">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id"
          ><img class="img" :src="'http://localhost:3000' + item.img" alt=""
        /></van-swipe-item>
      </van-swipe>
      <!-- 活动列表 -->
      <div class="activity">
        <ul>
          <li>
            <img src="../../../public/img/kingkong/seckill.png" alt="" />
            <span>显示秒杀</span>
          </li>
          <li>
            <img src="../../../public/img/kingkong/top.png" alt="" />
            <span>畅销商品</span>
          </li>
          <li>
            <img src="../../../public/img/kingkong/brand.png" alt="" />
            <span>品质大牌</span>
          </li>
          <li>
            <img src="../../../public/img/kingkong/selfsupport.png" alt="" />
            <span>小U自营</span>
          </li>
          <li>
            <img src="../../../public/img/kingkong/integral.png" alt="" />
            <span>积分商城</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- big活动展示图 -->
    <div class="bigimg">
      <div class="leftimg">
        <img src="../../../public/bigimg/big.png" alt="" />
      </div>
      <div class="rightimg">
        <img src="../../../public/bigimg/small.png" alt="" />
        <img src="../../../public/bigimg/02.png" alt="" />
      </div>
    </div>
    <div class="tow11">
      <van-tabs v-model="active">
        <van-tab title="热门推荐" name="a">双11尖货预购</van-tab>
        <van-tab title="上新推荐" name="b">畅购全球</van-tab>
        <van-tab title="所有商品" name="b">畅购全球</van-tab>

      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      value: "", // 搜索关键字
      catelist: "", // 分类列表
      bannerList: "", // 轮播图数据
      active: 0, // 默认展示页
    };
  },
  computed: {},
  created() {},
  mounted() {
    Promise.all([
      this.getcatelist(),
      this.getcatesList(),
      this.getbannerList(),
      this.getseckilllist(),
      this.getindexgoodselist(),
    ]).then((res) => {
      this.catelist = res[0].data.list;
      this.bannerList = res[2].data.list;
      console.log(res);
    });
  },
  watch: {},
  methods: {
    // 请求首页数据
    getcatelist() {
      // 首页分类数据
      return this.$api.getcate();
    },
    getcatesList() {
      // 首页分类详情
      return this.$api.getcates();
    },
    getbannerList() {
      // 首页轮播
      return this.$api.getbanner();
    },
    getseckilllist() {
      // 首页秒杀详情
      return this.$api.getseckill();
    },
    getindexgoodselist() {
      // 首页推荐商品
      return this.$api.getindexgoodse();
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
#box {
  padding-bottom: 200px;
}
.header {
  background: linear-gradient(#ff6040, #ff887d);
  padding: 10px 0;
  font-size: 30px;
  .top {
    display: flex;
    .left {
      color: #fff;
      display: flex;
      div {
        margin-left: 20px;
        width: 200px;
        height: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .canter {
      width: 380px;
      height: 60px;
      margin-left: 20px;
      background-color: #fff;
      display: flex;
      border-radius: 5px;
      padding: 5px 0;
      div {
        margin-top: 8px;
        margin-left: 5px;
      }
      input {
        width: 95%;
        height: 100%;
        border: none;
      }
    }
    .right {
      color: #fff;
      margin: 5px;
    }
  }
  .classfy {
    width: 100%;
    height: 80px;
    margin-top: 20px;
    display: flex;
    .classfyleft {
      width: 83%;
      overflow: hidden;
    }
    .classfyright {
      width: 15%;
      height: 80px;
      line-height: 80px;
      padding: 0 10px;
      color: #fff;
    }
  }
}
.image {
  width: 100%;
  margin-top: 20px;
}
.img {
  width: 800px;
  height: 100%;
}
.van-icon {
  font-size: 50px;
}
/deep/ .van-tabs--line {
  width: 100%;
  color: #fff;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 400px;
  text-align: center;
  background-color: #39a9ed;
  overflow: hidden;
}
.activity {
  width: 100%;
  font-size: 18px;
  margin-top: 10px;
  background-color: #fff;
  ul {
    display: flex;
    justify-content: space-between;
    li {
      flex: 1;
      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}
.bigimg {
  width: 95%;
  margin: 10px 20px;
  height: 350px;
  // background-color: #ff6040;
  display: flex;
  .leftimg {
    width: 90%;
    height: 100%;
    // margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    width: 50%;
    height: 100%;
    img {
      width: 90%;
      height: 30%;
    }
  }
}
</style>
